<template>
<div>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <!-- 首页user信息 -->
        <el-card shadow= 'hover'>
          <div class="userCard">
            <el-avatar :size="150" :src=imgUrl></el-avatar>
            <div class="userInfo">
              <p class="important-font">Hello,Admin</p>
              <p class="secondary-font">管理员</p>
            </div>
            </div>
          <div class="login-info">
            <p>上次登录时间: 2024/07/16 18:16</p>
          </div>
        </el-card>
        </div>
    </el-col>
  </el-row>
</div>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  name: "Index",
  data() {
    return {
      imgUrl: require("../assets/tx.jpg"),
      value: new Date(),
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      countData: [
        {
          name: "今日支付订单",
          value: 1200,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 1200,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日取消订单",
          value: 1200,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "今日退款订单",
          value: 1200,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月支付订单",
          value: 1200,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月退款订单",
          value: 1200,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  methods: {
    //柱状图
    initBarEcharts() {
      // 新建一个promise对象
      let p = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      p.then(() => {
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(this.$refs.barEcharts);
        let option = {
          title: {
            text: "销售表",
          },
          tooltip: {},
          legend: {
            data: ["今日销量", "昨日销量"],
          },
          xAxis: {
            data: ["华为", "vivo", "oppo", "ipone", "小米", "三星"],
          },
          yAxis: {},
          series: [
            {
              name: "今日销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
            {
              name: "昨日销量",
              type: "bar",
              data: [10, 18, 34, 8, 12, 21],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
    //饼图
    initPieEcharts() {
      let p = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      p.then(() => {
        let myChart = echarts.init(this.$refs.pieEcharts);
        let option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "0%",
            left: "left",
          },
          series: [
            {
              name: "订单信息",
              type: "pie",
              radius: ["20%", "65%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "left",
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "成交订单量" },
                { value: 735, name: "退款订单量" },
                { value: 580, name: "浏览量" },
                { value: 484, name: "加购量" },
                { value: 300, name: "预购量" },
              ],
            },
          ],
        };
        myChart.setOption(option);
      });
    },
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.el-card__body {
  padding: 10px;
}
.userCard {
  height: 180px;
  display: flex;
  border-bottom: 2px solid #dcdfe6;
  border-radius: 2px;
}
.userInfo {
  width: auto;
  padding: 6% 0 0 6%;
}
.important-font {
  font-weight: 900;
  font-size: 25px;
}
.secondary-font {
  color: #909399;
}
.login-info {
  height: 40px;
  text-align: left;
  color: #909399;
}
.tableInfo {
  margin: 20px 0 0 0;
}
.OrderCard {
  margin: 0 0 30px 30px;
  border: #dcdfe6 1px solid;
  border-radius: 10px;
  i {
    width: 30%;
    line-height: 120px;
    font-size: 30px;
    color: #fff;
  }
  div {
    width: 300px;
  }
}
.el-card {
  border: none;
}
.num {
  display: flex;
  flex-wrap: wrap;
}
.graph {
  margin: 15px 0 0 0;
}
.el-calendar {
  height: 265px;
}
</style>